<template>
    <div class="borderS1" :style="{width: width, height: height}">
        <svg :class="['borderS1-svg-container', right ? '' : 'filp']" width="100%" height="100%">
            <polyline points="0,0 480,0 500,20 500,500 0,500 0,0" fill="rgba(0, 0, 0, 0.6)" stroke="#1CCCFF" stroke-width="3"></polyline>
        </svg>
        <div class="container">
            <header>
                <span>{{title}}</span>
                <br>
                <span>{{label}}</span>
            </header>
            <main>
                <slot></slot>
            </main>
        </div>
    </div>
</template>

<script>
export default {
    name: "borderS1",
    props: {
        title: {
            type: String,
            default: "标题"
        },
        label: {
            type: String
        },
        borderColor: {
            type: String
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "100%"
        },
        right: {
            type: Boolean,
            default: true
        }
    },
    setup() {

    },
    mounted() {
        this.dynamicPoints();
        //this.createPolyline()
    },
    methods: {
        createPolyline() {
            let svg = document.getElementsByClassName("borderS1-svg-container");
            let polyline = document.createElement("polyline");
            polyline.setAttribute("fill", "rgba(0, 0, 0, 0.6)");
            polyline.setAttribute("stroke", "#1CCCFF");
            polyline.setAttribute("stroke-width", "3");
            if(this.right) {
                polyline.points = [
                    {x: 0, y: 0},
                    {x: 480, y: 0},
                    {x: 500, y: 20},
                    {x: 500, y: 500},
                    {x: 0, y: 500},
                    {x: 0, y: 0}
                ]
            }else {
                polyline.points = [
                    {x: 0, y: 20},
                    {x: 20, y: 0},
                    {x: 500, y: 0},
                    {x: 500, y: 500},
                    {x: 0, y: 500},
                    {x: 0, y: 20},
                ]
            }

            console.log(polyline);
            console.log(svg)
        },
        dynamicPoints(){
            let polylineList = this.getPolyline();
            for(let i = 0; i < polylineList.length; i++) {
                this.changePoints(polylineList[i]);
            }
        },
        getPolyline() {
            let svg = document.getElementsByClassName("borderS1-svg-container");
            let polylineList = [];
            for(let i = 0; i < svg.length; i++) {
                let polylineInfo = {};
                polylineInfo.polyline = svg[i].children[0];
                polylineInfo.width = svg[i].clientWidth;
                polylineInfo.height = svg[i].clientHeight;
                polylineList[polylineList.length] = polylineInfo;
            }
            return polylineList;
        },
        changePoints(item) {
            let elePoints = item.polyline.points;
            let points = [
                {x: 0, y: 0},
                {x: item.width - 20, y: 0},
                {x: item.width, y: 20},
                {x: item.width, y: item.height},
                {x: 0, y: item.height},
                {x: 0, y: 0}
            ]
            for(let i = 0; i < elePoints.length; i++) {
                if(elePoints[i].x === points[i].x && elePoints[i].y === points[i].y) {
                    continue
                }
                elePoints[i].x = points[i].x;
                elePoints[i].y = points[i].y;
            }
            window.onresize = ()=> {
                this.dynamicPoints();
            }
        }
    }
}
</script>

<style scoped>
.borderS1 {
    position: relative;
}
.borderS1-svg-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.filp {
    transform-origin: center center;
    transform: rotateY(180deg);
}
.borderS1 >.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.borderS1 .container >header {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 12px 0;
}
.borderS1 .container >header>span {
    padding: 6px 0;
}
.borderS1 .container >header>span:nth-of-type(1) {
    display: inline-block;
    font-size: 24px;
    position: relative;
    z-index: 1;
}
.borderS1 .container >header>span:nth-of-type(1)::after {
    content:"";
    display: block;
    width: 100%;
    height: 60%;
    border-radius: 20px;
    position: absolute;
    top: 20%;
    left: 0;
    background-color: #038EE9;
    filter: blur(4px);
    z-index: -1;
}
.borderS1 .container >main {
    flex: 1;
    padding: 0 12px;
}
</style>